<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>欢迎页面-X-admin2.0</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" href="/static/css/font.css">
    <link rel="stylesheet" href="/static/css/xadmin.css">
    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script type="text/javascript" src="/static/lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="/static/js/xadmin.js"></script>
</head>

<body class="layui-anim layui-anim-up" style="height: 457px;overflow: hidden;position: relative;">
<div class="x-body">
    <xblock style="height:40px">
        <span style="line-height:40px">店铺：{$shop.shop_name}</span>
        <span class="x-right" style="line-height:40px">桌号：{$table.table_no}</span>
    </xblock>
    <form class="layui-form" style="height: 400px;overflow: auto;padding-bottom: 80px;box-sizing: border-box;">
        <div class="layui-collapse">
            {volist name="data" id="vo"}
            <div class="layui-colla-item">
                <div class="layui-colla-title">
                    <div>
                        <span>昵称：</span>
                        <span>{$vo.user.wx_nickname}</span>
                        <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
                        <span>订单号：</span>
                        <span>{$vo.order_no}</span>
                        <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
                        <span>金额：</span>
                        <span>{$vo.money}</span>
                        <span style="float: right;">
                            <input type="checkbox" lay-skin="primary" name="order_no[]" value="{$vo.order_no}" title="" data-money="{$vo.money}" data-order_no="{$vo.order_no}">
                        </span>
                    </div>
                </div>
                <div class="layui-colla-content">
                    <table class="layui-table">
                        <thead>
                        <tr>
                            <th>ID</th>
                            <th>菜名</th>
                            <th>数量</th>
                            <th>单价</th>
                        </tr>
                        </thead>
                        <tbody>
                        {volist name="vo.order_foods" id="cvo"}
                        <tr>
                            <td>{$cvo.id}</td>
                            <td>{$cvo.food_name}</td>
                            <td>{$cvo.quantity}</td>
                            <td>{$cvo.food_price}</td>
                        </tr>
                        {/volist}
                        </tbody>
                    </table>
                </div>
            </div>
            {/volist}
        </div>
    </form>
    <form class="layui-form" id="form1" style="margin-left: 5px;">
        <div class="layui-form-item">
            <div class="layui-input-inline" style="padding-left: 10px;margin-right: 0;">
                <input type="radio" name="type" value="1" title="打折" checked>
                <input type="radio" name="type" value="2" title="直减">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-inline">
                <input class="layui-input" type="text" placeholder="请输入折扣" name="discount" lay-verify="required" autocomplete="off">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-inline">
                <input class="layui-input" type="password" placeholder="请输入密码" name="password" lay-verify="required" autocomplete="off">
            </div>
        </div>
    </form>
    <div class="fixed" style="width: 100%;position: absolute;left: 0;bottom: 10px;z-index: 9;overflow: hidden;padding-right: 20px;box-sizing: border-box;">
        <span style="float: left;margin-left: 10px;padding-top: 5px;">合计：</span>
        <span id="total" style="float: left;margin-left: 10px;color: red;font-size: 20px">0.00</span>
        <button  class="layui-btn layui-btn-disabled save" lay-filter="save" lay-submit="" style="float: right;margin-left: 10px;">结算</button>
        <button  class="layui-btn layui-btn-normal layui-btn-disabled save" lay-filter="fracture" lay-submit="" style="float: right;">打折</button>
    </div>
</div>
<script>
    layui.use(['form','element'], function(){
        var form = layui.form
            ,element = layui.element;
        form.on('checkbox()', function(data){
            if (data.elem.checked){
                var so = $('#total').html();
                var plus = $(data.elem).attr('data-money');
                var total = parseFloat(so) + parseFloat(plus);
                $('#total').html(total.toFixed(2));
                $('.save').removeClass('layui-btn-disabled');
            } else {
                var soo = $('#total').html();
                var reduce = $(data.elem).attr('data-money');
                var totals = parseFloat(soo) - parseFloat(reduce);
                $('#total').html(totals.toFixed(2));
                if (!totals) {
                    $('.save').addClass('layui-btn-disabled');
                }
            }
        });

        form.on('submit(fracture)',function () {
            layer.open({
                type: 1,
                title:'打折',
                content:$('#form1'),
                btn:['确认','取消'],
                yes:function (index, layero) {
                    var data = $('.layui-form').serializeArray();
                    $.post('{:url("order/fracture")}',data,function (res) {
                        if (res.code == 1){
                            layer.msg(res.msg,{icon:6,time:1000},function () {
                                window.location.reload();
                                layer.close(index);
                            });
                        } else {
                            layer.msg(res.msg,{icon:5,time:2000});
                        }
                    });
                }
            });

        });
        form.on('submit(save)',function () {
            var data = $('.layui-form').serializeArray();
            layer.confirm('确认要结算吗？',function(index){
                $.post('{:url("order/offPayDo")}',data,function (res) {
                    if (res.code == 1){
                        layer.msg(res.msg,{icon:6,time:1000},function () {
                            window.parent.location.reload();
                            layer.close(index);
                        });
                    } else {
                        layer.msg(res.msg,{icon:5,time:2000});
                    }
                });
            });
        });
    });

</script>
</body>

</html>